import React, {useState} from 'react';

const App = () => {

  const [obj,setObj] = useState({
    w: 100,
    h:100,
    x: 0,
    y:0
  })

  function mouseMove(event){
    // console.log(event.clientX,event.clientY);
    // 鼠标移动的时候发现 w 和 h 数据丢失了
    // 因为 {x: 1,y: 1} 代替了原来的 obj , 所以 w 和 h 丢失了

    // setObj({
    //   x: event.clientX,
    //   y: event.clientY
    // })

    // 如果有很多属性，那么这么写太费劲了
    // setObj({
    //   x: event.clientX,
    //   y: event.clientY,
    //   w: 100,
    //   h: 100
    // })

    // 可以使用扩展运算符，将原数据展开
      // setObj({
      //   ...obj,
      //   x: event.clientX,
      //   y: event.clientY
      // })

    setObj((prev)=>{
      // assign 可以将多个对象合并成一个对象
      // 第一个参数就是 将后面的对象合并到该对象中
      // 后续参数就是要合并的对象，靠后的对象会覆盖前面对象的相同属性
      return Object.assign({}, prev, {x: event.clientX,y: event.clientY})
    })
  }

  return (
    <div style={{width:'100vw', height:'100vh'}} onMouseMove={mouseMove}>
      <div>元素的宽度: {obj.w}   元素的高度：{obj.h}</div>
      <div>元素的坐标: {obj.x} --- {obj.y}</div>
    </div>
  );
};

export default App;
